<template>
	<view class="conn">
		<u-navbar leftText="返回" :safeAreaInsetTop="true" height="44px" safeAreaInsetTop="false"
			:bgColor="settings.navColor">
			<view class="u-nav-slot" slot="left"
				style="display: flex;align-items: center;justify-content: space-between;width: 90%;">
				<u-icon name="list" size="22" @click="main()" :color="settings.status"></u-icon>
				<view style="height:20rpx;width: 20rpx;"></view>
				<u-icon name="plus" size="22" @click="add()" :color="settings.status"></u-icon>
				<view style="width: 80%;margin-left: 20rpx;">
					<u-search :showAction="false" :animation="false" @focus="native()"></u-search>
				</view>
			</view>
		</u-navbar>
		<view style="margin-top: 160rpx;">
			<view style="display: flex;justify-content: center;">
				<u-tabs :list="list1" @click="click" current="1"></u-tabs>
			</view>
			<view class="goods_list" v-if="show">
				<view class="goods_item" v-for="item in urls2" :key="item.picUrl" @click="opendetail(item.id)"
					@longpress="removePics(item.id)">
					<image :src="item.picUrl!==null?item.picUrl:'https://cdn.uviewui.com/uview/empty/data.png'"
						lazy-load="true" mode="aspectFill"></image>
					<view style="text-align: center;margin-top: 20rpx;background-color: #ebebeb;border-radius: 10px;">
						{{item.typeName}}
					</view>
				</view>
			</view>
			<view class="goods_list" v-if="!show">
				<view class="goods_item" v-for="item in urls" :key="item" @click="navigator(item)"
					@longpress="huishou(item)">
					<image :src="item" lazy-load="true" mode="aspectFill"></image>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timer: null,
				settings: uni.getStorageSync("settings"),
				tobobj: {
					color: uni.getStorageSync("settings").navFontColor
				},
				total1: '',
				total2: '',
				total3: '',
				index: 0,
				show: true,
				urls2: [],
				urls: [],
				list1: [{
					name: '个人相册',
				}, {
					name: '公共相册',
				}, {
					name: '回收站'
				}],
				parm: {
					pageSize: 8,
					pageNum: 1,
					userId: uni.getStorageSync("user").id
				}
			}
		},
		onPullDownRefresh() {
			this.parm.pageNum = 1
			if (this.index === 0) {
				this.loadPics()
			} else if (this.index === 1) {
				this.getsi()
			} else {
				this.getLaji()
			}
			this.timer = setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			this.getBottom()
		},
		onLoad() {
			if (this.timer) {
				clearTimeout(this.timer); // 清除定时器  
			}
			uni.showLoading({
				title: '加载中'
			});
			// this.loadPics()
			this.getsi()

		},
		methods: {
			async getBottom() {
				const that = this
				if (this.index === 0) {
					if (this.urls2.length < this.total1) {
						console.log(this.urls)
						console.log(this.total1)
						this.parm.pageNum++
						uni.showLoading({
							title: '加载中'
						});
						uni.hideLoading();
						uni.request({
							url: that.$baseurl + "/wexinLogin/pictures/findSiPics",
							method: 'POST',
							data: that.parm,
							success(res) {
								that.urls2 = [...that.urls2, ...res.data.data.data.records]
							}
						})
					}
				} else if (this.index === 1) {
					if (this.urls2.length < this.total2) {
						this.parm.pageNum++
						uni.showLoading({
							title: '加载中'
						});
						uni.hideLoading();
						uni.request({
							url: that.$baseurl + "/wexinLogin/pictures/findGongPics",
							method: 'POST',
							data: that.parm,
							success(res) {
								that.urls2 = [...that.urls2, ...res.data.data.data.records]
							}
						})
					}
				} else {
					if (this.urls.length < this.total3) {
						this.parm.pageNum++
						uni.showLoading({
							title: '加载中'
						});
						uni.hideLoading();
						uni.request({
							url: that.$baseurl + "/wexinLogin/pictures/findLajiPics",
							method: 'POST',
							data: that.parm,
							success(res) {
								that.urls = [...that.urls, ...res.data.data.data.records]
							}
						})
					}
				}

			},
			async loadPics() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pictures/findSiPics',
					method: 'post',
					data: this.parm
				})
				this.show = true
				if (res.data.code === 200) {
					this.total1 = res.data.data.data.total
					this.urls2 = res.data.data.data.records
				} else {
					this.urls2 = '',
						this.total1 = ''
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
				}
				uni.hideLoading();
			},
			removePics(id) {
				if (this.index === 0) {
					const that = this
					uni.showModal({
						title: '提示',
						content: '确定删除当前相册？',
						success: function(res) {
							if (res.confirm) {
								uni.request({
									url: that.$baseurl + '/wexinLogin/pic/deletePics?id=' + id,
									method: 'post',
								})
								that.loadPics()
							} else if (res.cancel) {}

						}
					});
				}
			},
			async huishou(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定恢复当前图片吗',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: that.$baseurl + '/wexinLogin/pic/reset?userId=' + that.parm
									.userId +
									'&id=' + item,
								method: 'post',
							})
							that.getLaji()
						} else if (res.cancel) {}

					}
				});
			},
			main() {
				console.log(2)
				uni.navigateTo({
					url: '/pagesa/orderPic/orderPic?list=' + this.order
				})
			},
			add() {
				if (uni.getStorageSync("user").frentLink === 5) {
					return uni.showToast({
						title: '无权操作,联系客服开通权限',
						icon: "none"
					})
				}
				uni.navigateTo({
					url: '/pagesa/loadPic/loadPic'
				})
			},
			native() {
				uni.navigateTo({
					url: '/pagesa/search/search',
				})
			},
			opendetail(id) {
				uni.navigateTo({
					url: '/pagesa/picdetail/picdetail?id=' + id + "&index=" + this.index
				})
			},
			navigator(current) {
				uni.previewImage({
					current,
					urls: this.urls
				})
			},

			turn() {},
			async click(item) {
				this.parm.pageNum = 1
				uni.showLoading({
					title: '加载中'
				});
				if (item.index === 0) {
					this.index = 0
					this.loadPics()
					uni.hideLoading()
				} else if (item.index === 1) {
					this.index = 1
					this.getsi()
				} else {
					this.index = 2
					this.getLaji()
				}

			},
			async getsi() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pictures/findGongPics',
					method: 'post',
					data: this.parm
				})
				this.show = true
				this.urls2 = res.data.data.data.records
				this.total2 = res.data.data.data.total
				uni.hideLoading();
			},
			async getLaji() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pictures/findLajiPics',
					method: 'post',
					data: this.parm
				})
				this.urls = res.data.data.data.records
				this.total3 = res.data.data.data.total
				this.show = false
				uni.hideLoading();
			}

		}

	}
</script>
<style lang="scss">
	.conn {}

	.goods_list {
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #f8f8f8;


		.goods_item {
			background: #fff;
			width: 360rpx;
			margin: 10rpx 0;
			padding: 15rpx;
			box-sizing: border-box;

			image {
				width: 95%;
				height: 150px;
				display: block;
				margin: auto;
				border-radius: 5px;
			}

			.price {
				color: $shop-color;
				font-size: 36rpx;
				margin: 20rpx 0 5rpx 0;

				text:nth-child(2) {
					color: #ccc;
					font-size: 28rpx;
					margin-left: 17rpx;
					text-decoration: line-through;
				}
			}

			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
			}
		}
	}
</style>